<template>
  <div class="found">
    <el-breadcrumb class="fiend" separator-class="el-icon-arrow-right" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);line-height: 3;padding-left: 1em;">
      <el-breadcrumb-item>拼券广场</el-breadcrumb-item>
      <el-breadcrumb-item>创建拼券</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="chuanj">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
        </el-form-item>

        <el-form-item label="要求说明" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>

        <el-form-item label="活动时间" required>
          <el-col :span="6">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="开始日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">/</el-col>
          <el-col :span="6">
            <el-form-item prop="date2">
              <el-date-picker type="date" placeholder="结束日期" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
         <el-form-item label="优惠活动" required>
          <el-col :span="8">
            <el-form-item prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择优惠类型">
                <el-option label="满减" value="1"></el-option>
                <el-option label="折劵" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="参与商家" required>
          <el-col :span="5">
            <el-form-item prop="amount">
              <el-input v-model="ruleForm.amount" placeholder="请输入参加人数"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="活动介绍" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          desc: '',
          zhe: '',
          factor: '',
          amount: ''
        },
        rules: {
          name: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          region: [{
            required: true,
            message: '请选择活动区域',
            trigger: 'change'
          }],
          date1: [{
            type: 'date',
            required: true,
            message: '请选择开始日期',
            trigger: 'change'
          }],
          date2: [{
            type: 'date',
            required: true,
            message: '请选择结束日期',
            trigger: 'change'
          }],
          zhe: [{
            required: true,
            message: '请输入折扣',
            trigger: 'blur'
          }],
          factor: [{
            required: true,
            message: '请选择活动条件',
            trigger: 'blur'
          }],
          desc: [{
            required: true,
            message: '请填写活动形式',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            message: '请输入参加人数',
            trigger: 'blur'
          }]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert(this.ruleForm);
            console.log(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  .found {}

  .el-select {
    display: block;
  }

  .chuanj {
    width: 50%;
    margin: 2.4242rem auto;
    text-align: left;
    box-shadow: 0 2px 12px 0 rgba(57, 113, 153);
    padding: .9091rem;
  }

  .el-col-2 {
    text-align: center;
  }

  .el-input {
    width: auto;
    display: block;
  }

  /* .fiend{
    width: 100%;
    position: fixed;
    top:  2.8242rem;
  } */
</style>
